<template>
  <el-container>
    <el-main class="main-bg">
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <el-row>
          <el-col :span="24" class="text-right">
            <el-form-item label="备注" prop="remark">
              <WangEditor
                  ref="wangEditorRef"
                  :disabled="editorParams.isDisabled"
                  :editorParams="editorParams">
              </WangEditor>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import addTable from '@/mixins/addtable'
import { getNoticeList, postNoticeAdd, postNoticeUpdate } from './api'
import WangEditor from '@/components/WangEditor'

export default {
  name: 'NoticeList',
  mixins: [addTable],
  components: {
    WangEditor
  },
  data() {
    return {
      searchForm: {
        title: ''
      },
      title: '',
      type: 'look',
      tableHeader: [],
      oneLoading: false,
      drawerVisible: false,
      form: {
        title: '',
        remark: ''
      },
      rules: {
        remark: [{ required: true, message: '内容必填' }],
      },
      editorParams: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        height: '400px', // 富文本最小高度
        isDisabled: false // 富文本是否禁用
      }
    }
  },
  created() {
    this.getTableData()
  },

  methods: {
    getTableData() {
      this.loading = true
      getNoticeList()
         .then((res) => {
           if (!res) return
           const { data } = res
           setTimeout(() => {
             this.loading = false
             this.form = { ...data[0] }
             this.editorParams.content = data[0].remark
           }, 500)
         })
         .catch((err) => {
           console.log('TCL: getTableData -> err', err)
         })
    },
    handleSubmit() {
      this.form.remark = this.$refs.wangEditorRef.getEditorHtml()
      this.form.id
         ? postNoticeUpdate(this.form).then(({ success, message }) => {
           if (success) {
             this.$message.success(message)
           } else {
             this.$message.error(message)
           }
           this.onCancel()
           this.form = {}
           this.getTableData()
         })
         : postNoticeAdd(this.form).then(({ success, message }) => {
           if (success) {
             this.$message.success(message)
           } else {
             this.$message.error(message)
           }
           this.onCancel()
           this.form = {}
           this.getTableData()
         })
    }
  }
}
</script>
